<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>申请送水服务 - 智慧园区</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            background-color: #f5f5f5;
            height: 100vh;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        
        .ios-status-bar {
            height: 44px;
            background-color: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            padding: 0 16px;
            position: relative;
            z-index: 50;
        }
        
        .ios-status-bar.dark {
            background-color: rgba(30, 30, 30, 0.9);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .ios-nav-bar {
            height: 44px;
            background-color: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            padding: 0 16px;
            position: relative;
        }
        
        .ios-nav-bar.dark {
            background-color: rgba(30, 30, 30, 0.9);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .glass-card {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        }
        
        .glass-card.dark {
            background: rgba(30, 30, 30, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .main-content {
            height: calc(100vh - 88px); /* 状态栏 + 导航栏的高度 */
            overflow-y: auto;
            -ms-overflow-style: none;  /* IE and Edge */
            scrollbar-width: none;  /* Firefox */
            padding-bottom: 20px;
        }
        
        .main-content::-webkit-scrollbar {
            display: none;
        }
        
        .ios-input {
            background: rgba(255, 255, 255, 0.8);
            border-radius: 12px;
            border: 1px solid rgba(0, 0, 0, 0.1);
            padding: 12px 16px;
            font-size: 16px;
            transition: all 0.3s ease;
            width: 100%;
        }
        
        .ios-input.dark {
            background: rgba(50, 50, 50, 0.8);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: white;
        }
        
        .ios-input:focus {
            outline: none;
            box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.3);
        }
        
        .ios-button {
            background: linear-gradient(135deg, #0ea5e9, #2563eb);
            border-radius: 12px;
            color: white;
            font-weight: 600;
            padding: 14px;
            border: none;
            transition: all 0.3s ease;
        }
        
        .ios-button:active {
            transform: scale(0.98);
        }
        
        .ios-button-secondary {
            background: #e5e7eb;
            color: #4b5563;
        }
        
        .ios-button-secondary.dark {
            background: #374151;
            color: #e5e7eb;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-label {
            display: block;
            margin-bottom: 8px;
            font-size: 14px;
            font-weight: 500;
            color: #374151;
        }
        
        .form-label.dark {
            color: #e5e7eb;
        }
        
        .water-option {
            border: 1px solid rgba(0, 0, 0, 0.1);
            border-radius: 12px;
            padding: 12px;
            transition: all 0.3s ease;
        }
        
        .water-option.selected {
            border-color: #0ea5e9;
            background-color: rgba(14, 165, 233, 0.1);
        }
        
        .water-option.dark {
            border-color: rgba(255, 255, 255, 0.1);
        }
        
        .water-option.selected.dark {
            border-color: #0ea5e9;
            background-color: rgba(14, 165, 233, 0.2);
        }
        
        .quantity-control {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 120px;
        }
        
        .quantity-btn {
            width: 36px;
            height: 36px;
            border-radius: 18px;
            background-color: #f3f4f6;
            color: #4b5563;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            cursor: pointer;
            user-select: none;
        }
        
        .quantity-btn.dark {
            background-color: #374151;
            color: #e5e7eb;
        }
        
        .quantity-value {
            font-size: 16px;
            font-weight: 500;
            color: #1f2937;
        }
        
        .quantity-value.dark {
            color: #f9fafb;
        }
        
        /* 暗色模式样式 */
        .dark-mode .glass-card {
            background: rgba(30, 30, 30, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .dark-mode .ios-status-bar {
            background-color: rgba(30, 30, 30, 0.9);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .dark-mode .ios-nav-bar {
            background-color: rgba(30, 30, 30, 0.9);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .dark-mode .ios-input {
            background: rgba(50, 50, 50, 0.8);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: white;
        }
        
        .dark-mode .form-label {
            color: #e5e7eb;
        }
        
        .dark-mode .ios-button-secondary {
            background: #374151;
            color: #e5e7eb;
        }
        
        .dark-mode .water-option {
            border-color: rgba(255, 255, 255, 0.1);
        }
        
        .dark-mode .water-option.selected {
            border-color: #0ea5e9;
            background-color: rgba(14, 165, 233, 0.2);
        }
        
        .dark-mode .quantity-btn {
            background-color: #374151;
            color: #e5e7eb;
        }
        
        .dark-mode .quantity-value {
            color: #f9fafb;
        }
    </style>
</head>
<body>
    <div id="app" class="relative h-full">
        <!-- iOS 状态栏 -->
        <div class="ios-status-bar">
            <div class="flex justify-between items-center w-full">
                <div class="text-sm font-medium text-gray-800 dark:text-gray-200">9:41</div>
                <div class="flex space-x-2">
                    <i class="fas fa-signal text-gray-800 dark:text-gray-200"></i>
                    <i class="fas fa-wifi text-gray-800 dark:text-gray-200"></i>
                    <i class="fas fa-battery-full text-gray-800 dark:text-gray-200"></i>
                </div>
            </div>
        </div>
        
        <!-- iOS 导航栏 -->
        <div class="ios-nav-bar">
            <div class="flex justify-between items-center w-full">
                <div class="flex items-center">
                    <i class="fas fa-chevron-left text-blue-500 dark:text-blue-400 mr-2"></i>
                    <span class="text-gray-800 dark:text-gray-200">返回</span>
                </div>
                <div class="text-lg font-semibold text-gray-800 dark:text-gray-200">申请送水服务</div>
                <div class="w-16"></div> <!-- 占位，保持标题居中 -->
            </div>
        </div>
        
        <!-- 主内容 -->
        <div class="main-content bg-gray-50 dark:bg-gray-900">
            <div class="px-4 py-4">
                <!-- 表单 -->
                <form>
                    <!-- 选择水品牌 -->
                    <div class="form-group">
                        <label class="form-label">选择水品牌</label>
                        <div class="grid grid-cols-2 gap-3">
                            <div class="water-option selected" onclick="selectWaterBrand(this, '农夫山泉')">
                                <div class="flex items-center">
                                    <div class="w-10 h-10 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center mr-3">
                                        <i class="fas fa-check text-blue-500 dark:text-blue-400"></i>
                                    </div>
                                    <div>
                                        <div class="text-sm font-medium text-gray-800 dark:text-gray-200">农夫山泉</div>
                                        <div class="text-xs text-gray-500 dark:text-gray-400">¥18/桶</div>
                                    </div>
                                </div>
                            </div>
                            <div class="water-option" onclick="selectWaterBrand(this, '怡宝')">
                                <div class="flex items-center">
                                    <div class="w-10 h-10 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center mr-3">
                                        <i class="fas fa-water text-gray-400 dark:text-gray-500"></i>
                                    </div>
                                    <div>
                                        <div class="text-sm font-medium text-gray-800 dark:text-gray-200">怡宝</div>
                                        <div class="text-xs text-gray-500 dark:text-gray-400">¥16/桶</div>
                                    </div>
                                </div>
                            </div>
                            <div class="water-option" onclick="selectWaterBrand(this, '百岁山')">
                                <div class="flex items-center">
                                    <div class="w-10 h-10 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center mr-3">
                                        <i class="fas fa-water text-gray-400 dark:text-gray-500"></i>
                                    </div>
                                    <div>
                                        <div class="text-sm font-medium text-gray-800 dark:text-gray-200">百岁山</div>
                                        <div class="text-xs text-gray-500 dark:text-gray-400">¥17/桶</div>
                                    </div>
                                </div>
                            </div>
                            <div class="water-option" onclick="selectWaterBrand(this, '恒大冰泉')">
                                <div class="flex items-center">
                                    <div class="w-10 h-10 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center mr-3">
                                        <i class="fas fa-water text-gray-400 dark:text-gray-500"></i>
                                    </div>
                                    <div>
                                        <div class="text-sm font-medium text-gray-800 dark:text-gray-200">恒大冰泉</div>
                                        <div class="text-xs text-gray-500 dark:text-gray-400">¥15/桶</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 选择数量 -->
                    <div class="form-group">
                        <label class="form-label">选择数量</label>
                        <div class="glass-card p-4">
                            <div class="flex justify-between items-center">
                                <div class="text-base font-medium text-gray-800 dark:text-gray-200">桶数</div>
                                <div class="quantity-control">
                                    <div class="quantity-btn" onclick="changeQuantity(-1)">-</div>
                                    <div class="quantity-value">2</div>
                                    <div class="quantity-btn" onclick="changeQuantity(1)">+</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 配送地址 -->
                    <div class="form-group">
                        <label class="form-label">配送地址</label>
                        <div class="glass-card p-4">
                            <div class="flex justify-between items-center mb-3">
                                <div class="flex items-center">
                                    <div class="w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center mr-3">
                                        <i class="fas fa-map-marker-alt text-blue-500 dark:text-blue-400"></i>
                                    </div>
                                    <div>
                                        <div class="text-sm font-medium text-gray-800 dark:text-gray-200">A栋 1203室</div>
                                        <div class="text-xs text-gray-500 dark:text-gray-400">张先生 138****8888</div>
                                    </div>
                                </div>
                                <div class="text-blue-500 dark:text-blue-400 text-sm">
                                    <i class="fas fa-chevron-right"></i>
                                </div>
                            </div>
                            <div class="form-group mb-0">
                                <label class="form-label text-xs">备注信息</label>
                                <textarea class="ios-input" rows="2" placeholder="如有特殊要求请备注（选填）"></textarea>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 配送时间 -->
                    <div class="form-group">
                        <label class="form-label">配送时间</label>
                        <div class="glass-card p-4">
                            <div class="grid grid-cols-3 gap-2">
                                <div class="water-option selected text-center py-2" onclick="selectDeliveryTime(this, '尽快配送')">
                                    <div class="text-sm font-medium text-gray-800 dark:text-gray-200">尽快配送</div>
                                    <div class="text-xs text-gray-500 dark:text-gray-400">1-2小时内</div>
                                </div>
                                <div class="water-option text-center py-2" onclick="selectDeliveryTime(this, '下午配送')">
                                    <div class="text-sm font-medium text-gray-800 dark:text-gray-200">下午配送</div>
                                    <div class="text-xs text-gray-500 dark:text-gray-400">14:00-18:00</div>
                                </div>
                                <div class="water-option text-center py-2" onclick="selectDeliveryTime(this, '明日配送')">
                                    <div class="text-sm font-medium text-gray-800 dark:text-gray-200">明日配送</div>
                                    <div class="text-xs text-gray-500 dark:text-gray-400">9:00-12:00</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 支付方式 -->
                    <div class="form-group">
                        <label class="form-label">支付方式</label>
                        <div class="glass-card">
                            <div class="p-4 flex justify-between items-center border-b border-gray-200 dark:border-gray-700">
                                <div class="flex items-center">
                                    <div class="w-8 h-8 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center mr-3">
                                        <i class="fab fa-weixin text-green-500 dark:text-green-400"></i>
                                    </div>
                                    <div class="text-sm font-medium text-gray-800 dark:text-gray-200">微信支付</div>
                                </div>
                                <div class="w-5 h-5 rounded-full border-2 border-blue-500 dark:border-blue-400 flex items-center justify-center">
                                    <div class="w-3 h-3 rounded-full bg-blue-500 dark:bg-blue-400"></div>
                                </div>
                            </div>
                            <div class="p-4 flex justify-between items-center">
                                <div class="flex items-center">
                                    <div class="w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center mr-3">
                                        <i class="fas fa-credit-card text-blue-500 dark:text-blue-400"></i>
                                    </div>
                                    <div class="text-sm font-medium text-gray-800 dark:text-gray-200">线下支付</div>
                                </div>
                                <div class="w-5 h-5 rounded-full border-2 border-gray-300 dark:border-gray-600"></div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 订单金额 -->
                    <div class="glass-card p-4 mb-6">
                        <div class="flex justify-between items-center">
                            <div class="text-sm text-gray-600 dark:text-gray-400">商品金额</div>
                            <div class="text-sm text-gray-800 dark:text-gray-200">¥36.00</div>
                        </div>
                        <div class="flex justify-between items-center mt-2">
                            <div class="text-sm text-gray-600 dark:text-gray-400">配送费</div>
                            <div class="text-sm text-gray-800 dark:text-gray-200">¥0.00</div>
                        </div>
                        <div class="border-t border-gray-200 dark:border-gray-700 my-3"></div>
                        <div class="flex justify-between items-center">
                            <div class="text-base font-medium text-gray-800 dark:text-gray-200">实付金额</div>
                            <div class="text-lg font-bold text-blue-500 dark:text-blue-400">¥36.00</div>
                        </div>
                    </div>
                    
                    <!-- 提交按钮 -->
                    <div class="flex space-x-4">
                        <button type="button" class="ios-button ios-button-secondary flex-1">取消</button>
                        <button type="button" class="ios-button flex-1">提交订单</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <script>
        // 选择水品牌
        function selectWaterBrand(element, brand) {
            // 移除所有选中状态
            document.querySelectorAll('.water-option').forEach(el => {
                el.classList.remove('selected');
                const icon = el.querySelector('i');
                if (icon) {
                    icon.className = 'fas fa-water text-gray-400 dark:text-gray-500';
                }
                const bg = el.querySelector('.w-10');
                if (bg) {
                    bg.className = 'w-10 h-10 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center mr-3';
                }
            });
            
            // 添加选中状态
            element.classList.add('selected');
            const icon = element.querySelector('i');
            if (icon) {
                icon.className = 'fas fa-check text-blue-500 dark:text-blue-400';
            }
            const bg = element.querySelector('.w-10');
            if (bg) {
                bg.className = 'w-10 h-10 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center mr-3';
            }
            
            // 更新价格
            updatePrice(brand);
        }
        
        // 更改数量
        function changeQuantity(delta) {
            const quantityElement = document.querySelector('.quantity-value');
            let quantity = parseInt(quantityElement.textContent);
            quantity = Math.max(1, quantity + delta);
            quantityElement.textContent = quantity;
            
            // 更新价格
            updatePrice();
        }
        
        // 选择配送时间
        function selectDeliveryTime(element, time) {
            // 移除所有选中状态
            document.querySelectorAll('.water-option').forEach(el => {
                if (el.parentElement.parentElement.querySelector('.form-label').textContent === '配送时间') {
                    el.classList.remove('selected');
                }
            });
            
            // 添加选中状态
            element.classList.add('selected');
        }
        
        // 更新价格
        function updatePrice() {
            const selectedBrand = document.querySelector('.water-option.selected');
            const priceText = selectedBrand.querySelector('.text-xs').textContent;
            const pricePerBottle = parseFloat(priceText.replace('¥', '').replace('/桶', ''));
            
            const quantity = parseInt(document.querySelector('.quantity-value').textContent);
            const totalPrice = (pricePerBottle * quantity).toFixed(2);
            
            document.querySelector('.flex.justify-between.items-center .text-sm.text-gray-800.dark\\:text-gray-200').textContent = `¥${totalPrice}`;
            document.querySelector('.text-lg.font-bold.text-blue-500.dark\\:text-blue-400').textContent = `¥${totalPrice}`;
        }
        
        // 检测系统暗色模式
        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
            document.body.classList.add('dark-mode');
            document.querySelectorAll('.ios-status-bar, .ios-nav-bar, .glass-card, .ios-input, .form-label, .water-option, .quantity-btn, .quantity-value, .ios-button-secondary').forEach(el => {
                el.classList.add('dark');
            });
        }
        
        // 监听系统暗色模式变化
        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
            if (e.matches) {
                document.body.classList.add('dark-mode');
                document.querySelectorAll('.ios-status-bar, .ios-nav-bar, .glass-card, .ios-input, .form-label, .water-option, .quantity-btn, .quantity-value, .ios-button-secondary').forEach(el => {
                    el.classList.add('dark');
                });
            } else {
                document.body.classList.remove('dark-mode');
                document.querySelectorAll('.ios-status-bar, .ios-nav-bar, .glass-card, .ios-input, .form-label, .water-option, .quantity-btn, .quantity-value, .ios-button-secondary').forEach(el => {
                    el.classList.remove('dark');
                });
            }
        });
    </script>
</body>
</html> 